<template>
	<div class="modal-wrapper" v-if="appStore.lockShow">
		<div class="modal-container">
			<base-input
				class="mt-[10px]"
				v-model="password"
				labelT="account.password"
				type="password"
				:error-t="passwordError"
				:is-danger="!!passwordError"
				@update:focus="passwordError = ''"
				@keyup.enter="onSubmit" />
			<BaseButton class="mt-10" type="primary" textT="action.confirm" @click="onSubmit" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { BaseButton, BaseInput } from '@/components/base'
import { useAppStore } from '@/store'
import { setItem } from '@/utils'

defineOptions({ name: 'ViewsAppTodo' })

const appStore = useAppStore()
const password = ref('')
const passwordError = ref('')
const onSubmit = () => {
	if (password.value === '2828') {
		appStore.showLock(false)
		setItem('UNLOCK', true)
	} else {
		passwordError.value = 'app.paswordError'
		appStore.showLock(true)
	}
}
</script>
